<template>
  <div class="brand-main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>搜索条件</span>
      </div>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-input placeholder="用户名"></el-input>
        </el-col>
        <el-col :span="6" :offset="3">
          <el-input placeholder="电话查找"></el-input>
        </el-col>
        <!-- TODO:待完善功能 -->
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="2" :offset="16">
          <el-button size="small" type="primary">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="default">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card1">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="opDialog">新增</el-button>
      </div>
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in brandlist" :key="item.id">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              {{ item.cname }}
            </div>
            <div>
              <img style="width: 100%;" :src="item.coverImg" alt="" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="新增品牌" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" label-width="80px">
        <el-form-item label="中文名称" label-width="80px">
          <el-input v-model="branddetail.cname" size="small"></el-input>
        </el-form-item>
        <el-form-item label="英文名称" label-width="80px">
          <el-input v-model="branddetail.ename" size="small"></el-input>
        </el-form-item>
        <el-form-item label="描述信息" label-width="80px">
          <el-input v-model="branddetail.descr" size="small"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" label-width="80px">
          <el-upload
            class="upload-demo"
            :action="url"
            multiple
            :limit="3"
            :on-success="successCall"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closedilog">取 消</el-button>
        <el-button type="primary" @click="closedilog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import urls from "@/settings";
import brandApi from "@/api/product/brand";
export default {
  name: "productbrand",
  data() {
    return {
      url: urls.imgUrl,
      brandlist: [],
      dialogVisible: false,
      branddetail: {}
    };
  },
  methods: {
    getBrandList() {
      brandApi.getBrandList().then(res => {
        console.log(res);
        this.brandlist = res.data.list;
      });
    },
    opDialog() {
      this.dialogVisible = true;
    },
    successCall(val) {
      this.branddetail.coverImg = val.ossUrl;
      if (val.code == "S") {
        this.$message.success("上传成功");
      }
    },
    //保存新增品牌
    closedilog() {
      this.dialogVisible = false;
      console.log(this.branddetail);
      let params = this.branddetail;
      console.log(params);

      brandApi.upBrand(params).then(res => {
        console.log(res);
      });
    }
  },
  created() {
    this.getBrandList();
  }
};
</script>

<style lang="scss" scoped>
.brand-main {
  .box-card {
    width: 95%;
    margin: 10px auto;
  }
  .box-card1 {
    width: 95%;
    margin: 10px auto;
  }
}
</style>
